<template>
  <div class="index layoutVerticle">
    <div class="tab-page-con">
      <keep-alive>
        <component ref="component" :upcomingActive.sync="upcomingActive" :is="curComponent"></component>
      </keep-alive>
    </div>
    <van-tabbar v-model="cacheActive" active-color="#3676F5" inactive-color="#808080" @change="tabChange">
      <van-tabbar-item v-for="(item) of tabList" :key="item.name">
        <span>{{ item.name }}</span>
        <img :src="props.active ? item.active : item.inactive"     slot="icon" slot-scope="props"/>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import home from '@/views/home/Home.vue'
import mine from '@/views/mine/Mine.vue'
export default {
  name: 'Index',
  data: () => ({
    active: 0,
    upcomingActive: 0,
    tabList: [
      { name: '首页', url: 'home' , active:require('@/assets/icon/mainPage/home_press.png'), inactive:require('@/assets/icon/mainPage/home_normal.png')},
      { name: '我的', url: 'mine' , active:require('@/assets/icon/mainPage/mine_press.png'), inactive:require('@/assets/icon/mainPage/mine_normal.png')},
    ],
  }),
  components: {
    home,
    mine,
  },
  computed: {
    cacheActive: {
      get() {
        return this.active
      },
      set(val) {
        this.savePosition()
        this.$router.push({
          query: { ...this.$route.query, curItem: val },
          replace: true
        })
        const height = this.$route.meta.savedPosition[val]
        this.active = val
        if (height) {
          setTimeout(() => {
            this.$refs.component.$el.scrollTop = height
          })
        }
      },
    },
    curComponent() {
      return this.tabList[this.active].url
    },
  },
  activated() {
  },
  mounted() {
  },
  methods: {
    tabChange(active){
      window.mdyjCacheActive = active;
    },
    savePosition() {
      window.mdyjCacheActive = this.active
      const meta = this.$route.meta
      if (!meta.savedPosition) meta.savedPosition = {}
      meta.savedPosition[this.active] = this.$refs.component.$el.scrollTop
    },
    changeTab(index) {
      this.cacheActive = index;
      window.mdyjCacheActive = index;
    },
  },
  beforeRouteEnter(to, from, next) {
    const active = Number(to.query.curItem) || 0
    window.mdyjCacheActive = active
    next((vm) => {
      if (typeof active === 'number') {
        vm.active = active
        vm.$nextTick(() => {
          const scrollTop = vm.$route.meta.savedPosition?.[active]
          if (scrollTop) {
            vm.$refs.component.$el.scrollTop = scrollTop
          }
        })
      }
      return true
    })
  },
  beforeRouteLeave(to, from, next) {
    this.savePosition()
    next()
  },
}
</script>
<style lang="less" scoped>
  .index {
    height: 100%;
    .tab-page-con {
      // height: calc(100% - 50px);
      flex: 1 1 auto;
      position: relative;
    }
    .van-tabbar--fixed {
      // z-index: 99999;
      position: relative;
    }
  }

  .layoutVerticle{
    display: flex;
    flex-direction: column;
  }

  .layoutHorizontal{
    display: flex;
    flex-direction: row;
  }

  .layoutCenter{
    justify-content: center;
    align-items: center;
  }
  .verticleCenter {
    align-items: center;
  }
</style>